<template>
  <div class="InboundList-box">
    <!-- 新闻动态 -->
    <h3 class="mb16">素养活动</h3>
    <!-- 搜索栏 -->
    <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
    <!-- 增删改查 -->
    <div class="function-box" >
     <!-- <el-button class="addBtn2" @click="showSignUpDialog">报名</el-button>-->
      <!-- <el-button class="createBtn">编辑</el-button> -->
      <!-- <el-button class="exportBtn">删除</el-button> -->
    </div>
    <!-- 新闻动态列表页面 -->
    <el-table border v-loading="loading" :data="inventoryFormLabelData" @selection-change="handleSelectionChange">
      <el-table-column label="活动封面"  align="left" prop="coverImageUrl" :show-overflow-tooltip="true"/>
      <el-table-column label="活动名称" align="center" prop="title" width="160"/>
      <el-table-column label="活动时间" sortable align="center" prop="activityStart" width="200" >
        <template #default="scope">
          <!-- {{ scope.row.releaseDate.slice(0, 16) }} -->
        </template>
      </el-table-column>
      <el-table-column label="活动类型" align="center" prop="type" width="100"/>

      <el-table-column label="报名截止时间" sortable align="center" prop="signupEnd" width="200" >
        <template #default="scope">
          <!-- {{ scope.row.releaseDate.slice(0, 16) }} -->
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center" width="100">
        <template #default="{ row }">
          <!-- 根据状态显示不同颜色的标签 -->
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="已报名人数" align="center" prop="registered" width="100">
        <template #default="scope">
          {{ scope.row.activityParticipationList.length }}
        </template>
      </el-table-column>
      <el-table-column label="报名状态" align="center" width="100">
        <template #default="{ row }">
          <!-- 根据状态显示不同颜色的标签 -->
          <el-tag :type="getStatusTagType2(row.statusStu)">
            {{ getStatusText2(row.statusStu) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template #default="scope">
          <el-button  link class="putBtn" @click="handleDetail(scope.row)">查看</el-button>
          <el-button link class="delBtn" @click="showSignUpDialog(scope.row)">报名</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
                @update:page="updatePage" @update:limit="updateLimit" :pageSizes="pageSizes" @pagination="handleChange" />
    <el-dialog  v-model="signUpDialogVisible" width="800px" append-to-body>
      <div class="activity-dialog">
        <!-- 活动基本信息 -->
        <div class="activity-info">
          <h3>报名信息</h3>
          <div class="formItembox">
            <!-- 第一行 -->
            <div class="formItem">
              <div class="info-label">学生姓名</div>
              <div class="info-value">{{ userInfo.nickName }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">学号</div>
              <div class="info-value">{{  userInfo.userName}}</div>
            </div>
            <div class="formItem">
              <div class="info-label">组织</div>
              <div class="info-value">{{ userInfo.dept.deptName }}</div>
            </div>
            <!-- 第二行 -->
            <div class="formItem">
              <div class="info-label">活动名称</div>
              <div class="info-value">{{ currentActivity.title }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">报名时间</div>
              <div class="info-value">{{ currentActivity.signupStart }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">报名截止时间</div>
              <div class="info-value">{{ currentActivity.signupEnd }}</div>
            </div>
            <!-- 第三行 -->
            <div class="formItem">
              <div class="info-label">活动时间</div>
              <div class="info-value">{{ currentActivity.activityStart }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">活动地点</div>
              <div class="info-value">{{ currentActivity.address }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">活动范围</div>
              <div class="info-value">{{ currentActivity?.activityScopeNameList.join(',') }}</div>
            </div>
            <!-- 第四行 -->
            <div class="formItem">
              <div class="info-label">得分标准</div>
              <div class="info-value">{{ currentActivity.scoreConfig }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">活动类型</div>
              <div class="info-value">{{ currentActivity.type }}</div>
            </div>
            <div class="formItem">
              <div class="info-label">活动状态</div>
              <div class="info-value">{{ currentActivity.isOpen }}</div>
            </div>
            <!-- 第五行 -->
            <div class="formItem">
              <div class="info-label">活动具体内容</div>
              <div class="info-value">
                {{ currentActivity.content }}
              </div>
            </div>
            <!-- 第六行 -->
            <div class="formItem">
              <div class="info-label">活动封面</div>
              <div class="info-value">
                <img
                    v-if="currentActivity.coverImageUrl"
                    :src="currentActivity.coverImageUrl"
                    alt="活动封面"
                    style="max-width: 200px; max-height: 150px; border-radius: 4px;"
                />
                <span v-else>暂无封面</span>
              </div>
            </div>
          </div>
        </div>


        <!-- 报名表单 -->


      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="signUpDialogVisible = false">取消报名</el-button>
          <el-button type="primary" @click="submitSignUp">提交报名</el-button>
        </div>
      </template>
    </el-dialog>



  </div>

</template>

<script setup>
import {ref, reactive, toRefs, onMounted} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import serchForm from '@/components/inventory/serchForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import pagination from '@/components/Pagination/index'
import { checkPermi } from '@/utils/permission.js'
import {listNotice,getdeptApi,addNotice,delNotice,updateNotice} from '@/api/system/notice.js'
import {useListStore} from '@/store/modules/news.js'
import { storeToRefs } from 'pinia'
import request from "../../../../utils/request";
import {activityApi, activitysDetailApi, activitysignlApi} from "../../../../api/system/activity";
const userInfo = ref('')

const router = useRouter();
const route = useRoute();
const data = reactive({});
const { proxy } = getCurrentInstance();
const newsPut = useListStore()
const { editIdLong } = storeToRefs(newsPut) // 解构并保持响应性

const loading = ref(false)
const treeRef = ref(null);
// 表单
let inventoryForm = ref({
})
const pageSizes = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(0)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)

// 当前页面位置发生变化
const updatePage = (val) => {
  console.log(val, '第几页');
  pageNum.value = val
  getListFn()
}
const onSearch = (v) => {
  console.log(v, '查询参数')
  // 每次查询后回到页1
  pageNum.value = 1
  if(v.activityStart){
    v.startDate = v.activityStart[0]
    v.endDate = v.activityStart[1]
    delete  v.activityStart
  }

  getListFn(v)
}

// 条目个数发生变化
const updateLimit = (val) => {
  console.log(val, '每页多少条');
  pageSize.value = val
  getListFn()
}
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'activityStart',
    label: '活动时间',
    type: 'datetimerange',
  },
  {
    name: 'title',
    label: '活动名称',
  },

  {
    name: 'activityCategoryId',
    label: '活动类型',
    type:'activityType'
  },

])
let inventoryFormLabelData= ref([
  {
    // eventDate:'2021年12月11日',
    // eventName:'光盘大比拼',
    // eventCover:'sdsd',
    // eventType:'公益活动',
    // registered:'1000',
    // RegDeadline:'2022年12月11日'


  },
])
const signUpDialogVisible = ref(false);
const currentActivity = ref({


});



// 表单验证规则

// 显示报名弹窗
async function showSignUpDialog  (row) {
 const {code,data} =  await activitysDetailApi(row.id)
  if(code === 200){
    currentActivity.value = data
  }

  signUpDialogVisible.value = true;
}
onMounted(()=>{
  getListFn()
  userInfo.value =  JSON.parse(localStorage.getItem('userInfo'))
})


// 提交报名
 async function submitSignUp() {
      console.log('报名信息:', currentActivity.value);
      const obj = {
        activityId: currentActivity.value.id
      }
     const {code} =  await activitysignlApi(obj)
   if(code === 200){
     signUpDialogVisible.value = false
     ElMessage.success('报名成功')
   }

}

// 文件上传处理
function handleExceed() {
  ElMessage.warning('只能上传一个文件');
}

const pageType = ref('') // 当前页面状态

const currentPageData = computed(() => {
  const start = (pageNum.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return inventoryFormLabelData.value.slice(start, end);
});

const handleChange = (val) => {
  pageNum.value = val.page;
  pageSize.value = val.limit;
};

// 活动列表数据
const getListFn = async (v = {}) =>{
  console.log(v,'vvv')
  v.type = 1// 活动列表传1 z自主2
  const {code , total, rows} = await activityApi(v)
  if(code === 200){
    inventoryFormLabelData.value = rows
    total.value = total
  }


}
// 获取状态对应的文本
function getStatusText(status) {
  const map = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝',
    3: '已取消'
  };
  return map[status] || '未知';
}
// 获取状态对应的标签类型（颜色）

function getStatusTagType(status) { const typeMap = {
  0: 'info',    // 蓝色（待审核）
  1: 'warning', // 黄色（已通过）
  2: 'success', // 绿色（已拒绝）
  3: 'danger'   // 红色（已取消）
};
  return typeMap[status] || 'info';

}
function getStatusText2(statusStu) {
  const map = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝',
    3: '已取消'
  };
  return map[statusStu] || '未知';
}
// 获取状态对应的标签类型（颜色）

function getStatusTagType2(statusStu) { const typeMap = {
  0: 'info',    // 蓝色（待审核）
  1: 'warning', // 黄色（已通过）
  2: 'success', // 绿色（已拒绝）
  3: 'danger'   // 红色（已取消）
};
  return typeMap[status] || 'info';

}

function handleDetail(row){
  router.push({path: `/activityListsDetail/${row.id}`});

}


</script>

<style lang="scss" scoped>
.activity-info {
  margin-bottom: 20px;
}

.formItembox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;

  .formItem {
    width: 28%;
    // display: flex;
    margin-right: 30px;
  }
  .formItem:nth-child(13){
    width: 100%;

  }
  .formItem:nth-child(14){
    width: 100%;

  }
}
.formItem {
  width: 28%;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}



.formItem:nth-child(3),
.formItem:nth-child(6),
.formItem:nth-child(9) {
  margin-right: 0;
}

.info-label {
  font-weight: bold;
  margin-bottom: 4px;
  color: #82889a;
  font-size: 14px;
}

.info-value {
  background-color: #f3eeee;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  min-height: 36px;
  display: flex;
  align-items: center;
}

h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
</style>
